<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/message.css" />
		<style type="text/css">
			[v-cloak] {
				display: none!important;
			}
		</style>
	</head>

	<body>
		<div class="mui-page" id="refreshContainer">
			<div id="mui-messagesMsg" v-cloak>
				<div class="mui-navbar-inner mui-bar mui-bar-nav">
					<a class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span>
					</a>
					<h1 class="mui-center mui-title">消息中心
					<span v-show="total !=0">({{total}})</span>
				</h1>
					<a href="#topPopover" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
				</div>
				<div class="mui-page-content" style="margin-top: 55px;">
					<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
						<li v-if="total == 0" class="mui-table-view-cell">
							<div class="mui-table">
								<div class="mui-table-cell mui-col-xs-10">
									<p class="mui-h6 mui-ellipsis" style="text-align: center; font-size: 14px;">暂无消息</p>
								</div>
							</div>
						</li>
						<li v-else v-for="(item,index) in items" :data-id="item.userId" :data-read="item.isRead==true?'已读':'未读'" class="mui-table-view-cell">
							<div class="mui-table">
								<div class="mui-table-cell mui-col-xs-9" v-if='item.isRead==true'>
									<p class="mui-h5 mui-ellipsis" style="text-indent: 0;">{{item.msgContent}}</p>
									<span class="mui-badge" style="color: #fff;">已读</span>
								</div>
								<div class="mui-table-cell mui-col-xs-9" v-else=''>
									<p class="mui-h5 mui-ellipsis" style="text-indent: 0;">{{item.msgContent}}</p>
									<span class="mui-badge  mui-badge-danger" style="color: #fff;">未读</span>
								</div>
								<div class="mui-table-cell mui-col-xs-3 mui-text-right">
									<span class="mui-h5">{{item.createTime}}</span>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<!--右上角弹出菜单-->
				<div id="topPopover" class="mui-popover">
					<div class="mui-popover-arrow"></div>
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view" id="topPopoverHandle">
								<li class="mui-table-view-cell">
									<a href="javascrip:;" v-on:click="handel(1)">清空消息</a>
								</li>
								<li class="mui-table-view-cell">
									<a href="javascrip:;" v-on:click="handel(2)">标记已读</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/server.js"></script>
<script type="text/javascript">
	mui.init({
		pullRefresh: {
			container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			up: {
				height: '50px',
				auto: false,
				contentrefresh: '正在加载.....',
				contentmore: '暂无更多数据',
				callback: pullUprefresh
			},
			down: {
				style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
				color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
				height: '50px', //可选,默认50px.下拉刷新控件的高度,
				range: '100px', //可选 默认100px,控件可下拉拖拽的范围
				offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
				auto: false, //可选,默认false.首次加载自动上拉刷新一次
				callback: pullrefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			}
		}
	});

	var _creator; //登录用户id
	var first = false;
	var messgeVue;

	var logininfo = app.getUserInfo();
	_creator = logininfo.id;

	var offset = 0;
	var limit = 10;
	var isflag = true;
	var total; //总数

	//	消息中心参数
	var usermessagesobj = {
		'offset': offset,
		'limit': limit,
		'userId': _creator
	}

	//	消息中心数据对象
	var userMessagesObj = {};

	initMsgdata();

	//	获取消息中心数据
	function initMsgdata() {

		server.message.getMsg(usermessagesobj, function(r) {
			total = r.total;
			if(!first) { //首次加载动态数据，动态渲染DOM
				userMessagesObj = {
					total: r.total,
					items: r.rows
				}
				getDataDom();
				first = true;
			} else { //非首次进入，只更新DOM数据，DOM结构不变
				setTimeout(function() {
					messgeVue.items = r.rows;
					messgeVue.total = r.total; //	重新渲染vue对象DOM时，只需要赋值给初始化VUE对象对应的字段即可
				}, 500)
			}
		}, function(r) {
			mui.toast('服务器错误,请稍后刷新重试');
		})

	};

	function getDataDom() {
		messgeVue = new Vue({
			el: "#mui-messagesMsg",
			data: userMessagesObj,
			methods: {
				handel: function(msgtype) {
					mui('#topPopover').popover('hide');
					var list = document.querySelectorAll('.mui-page-content li');
					if(msgtype == 1) {
						if(list.length == 0) {
							mui.toast('暂无消息可处理');
							return;
						}

						server.user.setClearMessages(_creator, function(r) {
							if(r.errCode == 0) {
								var page = plus.webview.getWebviewById('tab-webview-subsetting.html');
								mui.fire(page, 'myfresh');
								mui.toast('消息中心已清空');
								location.reload();
							}
						}, function(r) {
							mui.toast('获取服务器数据失败,请稍后重试');
						})

					} else {
						//	标记已读
						if(list.length == 0) {
							mui.toast('暂无未读消息可处理');
							return;
						}

						server.user.setReadMessages(_creator, function(r) {
							if(r.errCode == 0) {
								setTimeout(function() {
									var parentPage = plus.webview.getWebviewById('messageInfo');
									mui.fire(parentPage, 'myfresh');
									mui.toast('消息已阅读读');
									location.reload(); //标记为已读 ,重新加载当前界面
									return true;
								}, 500);

							}
						}, function(r) {
							mui.toast('获取服务器数据失败,请稍后重试');
						})
					}

				}
			}
		});
	}

	//	下拉刷新功能
	function pullrefresh() {
		initMsgdata();
		setTimeout(function() {
			mui('#refreshContainer').pullRefresh().endPulldown();
		}, 1000);
	}

	//	上拉分页功能
	function pullUprefresh() {

		if(isflag) { //初始化isflag 为true,有分页
			isflag = total > limit + 10 ? true : false; // 判断总条数 与当前页显示条数+5 
			limit += 10;

			usermessagesobj.limit = limit;
			initMsgdata();

			setTimeout(function() {
				mui('#refreshContainer').pullRefresh().endPullupToRefresh();
			}, 1000);
			pullrefresh();

		} else {
			setTimeout(function() {
				mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
			}, 1000);
		}
	};
</script>